﻿@model FPP.Models.PoolType
@{
    ViewBag.Title = string.Format("Famous People Pool - Join the game {0}", @Model.Name);
}
<h2>
    Joining the game @Model.Name</h2>
<script type="text/javascript" language="javascript">
    $(function () {
        function showPerson(id, name, imageurl, dob, age) {
            $("#celebID-Input").attr("value",id);
            $("#celebName-Value").text(name);
            $("#celebImage").attr("src", imageurl);
            $("#celebDOB-Value").text(dob);
            $("#celebAge-Value").text(age);
        }

        $("input.FamousPerson-List").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/FamousPeople/FPPAutoComplete",
                    type: "POST",
                    dataType: "json",
                    data: {
                        searchText: request.term,
                        maxResults: 12
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.DisplayName,
                                value: item.DisplayName,
                                id: item.Id,
                                imageUrl: item.ImageUrl,
                                age: item.Age,
                                dob: item.DoB
                            }
                        }))
                    }
                });
            },
            select: function (event, ui) {
                showPerson(ui.item.id,
                           ui.item.label,
                           ui.item.imageUrl,
                           ui.item.dob,
                           ui.item.age);
            },
            minLength: 2
        });

    });
</script>
@using (Html.BeginForm())
{
    <fieldset>
        <legend>Details about @Model.Name</legend>
        <table>
            <tr>
                <td>
                    Primary Celebrities :
                </td>
                <td>
                    @Model.NumOfPeople
                </td>
            </tr>
            <tr>
                <td>
                    Alt. Celebrities :
                </td>
                <td>
                    @Model.NumOfAlts
                </td>
            </tr>
            <tr>
                <td>
                    Scoring Rule :
                </td>
                <td>
                    @Model.WinRule
                </td>
            </tr>
            <tr>
                <td>
                    Start Date :
                </td>
                <td>
                    @Model.DateStart
                </td>
            </tr>
            <tr>
                <td>
                    End Date :
                </td>
                <td>
                    @Model.DateEnd
                </td>
            </tr>
        </table>
    </fieldset>
    <table>
        <tr>
            <th>
                Start typing a Celebrity Name (ex. Michael Jackson)
            </th>
        </tr>
        <tr>
            <td>
                <input type="text" name="celebName" class="FamousPerson-List" id="PrimarySelection" size="30" />
            </td>
        </tr>
    </table>
    
    <input id="celebID-Input" type="hidden" name="celebID" />
    
    <div id="celebViewerWrapper">
        <div id="celebImageWrapper">
            <img id="celebImage" height="150" width="120" alt="Celebrity Preview" src="../../Content/rc/images/fpp-CelebrityUnknown.gif" />
        </div>
        <div class="celebLabelValueWrapper">
            <div id="celebName-Label" class="celebLabel">
                Name :
            </div>
            <div id="celebName-Value" class="celebValue">
            </div>
        </div>
        <div class="celebLabelValueWrapper">
            <div id="celebDOB-Label" class="celebLabel">
                Birthday :
            </div>
            <div id="celebDOB-Value" class="celebValue">
            </div>
        </div>
        <div class="celebLabelValueWrapper">
            <div id="celebAge-Label" class="celebLabel">
                Age :
            </div>
            <div id="celebAge-Value" class="celebValue">
            </div>
        </div>
    </div>
    <br />
    
    <input type="submit" value="Add to List" style="width: 300px;" />
}
@Html.ActionLink("Back to List", "Index")
